{extend name="main/index" /}
{block name="main"}
<div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="#">成本管理</a>
            </li>
            <li class="active">项目成本总览</li>
        </ul><!-- .breadcrumb -->

        <div class="nav-search" id="nav-search">
            <form class="form-search">
                <span class="input-icon">
                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                    <i class="icon-search nav-search-icon"></i>
                </span>
            </form>
        </div><!-- #nav-search -->
    </div>

    <div class="page-content">
        <h3 class="header smaller lighter blue">成本总览</h3>
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-responsive">
                            <div role="tabpanel">
                              <!-- Nav tabs -->
                              <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">计划成本</a></li>
                                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">实际成本</a></li>
                              </ul>
                              <!-- Tab panes -->
                              <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active" id="home">
                                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>项目名称</th>
                                                <th>办公计划成本(元)</th>
                                                <th>材料计划成本(元)</th>
                                                <th>机械计划成本(元)</th>
                                                <th>安全计划成本(元)</th>
                                                <th>劳务计划成本(元)</th>
                                                <th>其它计划成本(元)</th>
                                                <th>计划规费(元)</th>
                                                <th>计划税金(元)</th>
                                                <th>项目计划总成本(元)</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {volist name="dataPlan" key="k" id="v"}
                                            {if condition = "($data eq '')"}
                                                <tr>
                                                    <td colspan="12">暂无数据</td>
                                                    <td><a href="admin/cost/costPlanAdd" class="btn btn-xs btn-danger d-btn" >添加数据</a></td>
                                                </tr>
                                            {else /}
                                                <tr>
                                                    <td>{$v['project_name']}</td>
                                                    <td>{$v['work_cost_plan']}</td>
                                                    <td>{$v['material_cost_plan']}</td>
                                                    <td>{$v['machine_cost_plan']}</td>
                                                    <td>{$v['safe_cost_plan']}</td>
                                                    <td>{$v['labour_cost_plan']}</td>
                                                    <td>{$v['else_cost_plan']}</td>
                                                    <td>{$v['charges_plan']}</td>
                                                    <td>{$v['expenses_taxation_plan']}</td>
                                                    <td>{$v['total_cost_plan']}</td>
                                                    <td>
                                                        <a href="{:url('admin/cost/costPlanEdit',['id'=>$v['id']])}" class="btn btn-xs btn-primary show-btn">修改</a>
                                                        <button data-id="{$v['id']}" class="btn btn-xs btn-danger delPlan-btn" >删除</button>
                                                    </td>
                                                </tr>
                                                <input type="hidden" id="plan0" value="{$v['project_name']}">
                                                <input type="hidden" id="plan1" value="{$v['work_cost_plan']}">
                                                <input type="hidden" id="plan2" value="{$v['material_cost_plan']}">
                                                <input type="hidden" id="plan3" value="{$v['machine_cost_plan']}">
                                                <input type="hidden" id="plan4" value="{$v['safe_cost_plan']}">
                                                <input type="hidden" id="plan5" value="{$v['labour_cost_plan']}">
                                                <input type="hidden" id="plan6" value="{$v['else_cost_plan']}">
                                                <input type="hidden" id="plan7" value="{$v['charges_plan']}">
                                                <input type="hidden" id="plan8" value="{$v['expenses_taxation_plan']}">
                                            {/if}
                                        {/volist}
                                        </tbody>
                                    </table> 
                                    <div>
                                        <div id="main1" style="width: 800px;height:600px;">
                                        </div>
                                    </div>
                                </div>
                                <div role="tabpanel" class="tab-pane" id="profile">
                                    <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>项目名称</th>
                                                <th>办公实际成本(元)</th>
                                                <th>材料实际成本(元)</th>
                                                <th>机械实际成本(元)</th>
                                                <th>安全实际成本(元)</th>
                                                <th>劳务实际成本(元)</th>
                                                <th>其它实际成本(元)</th>
                                                <th>实际规费(元)</th>
                                                <th>实际税金(元)</th>
                                                <th>成本降低额(元)</th>
                                                <th>成本降低率</th>
                                                <th>项目实际总成本(元)</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        {volist name="data" key="k" id="v"}
                                            {if condition = "($data eq '')"}
                                                <tr>
                                                    <td colspan="12">暂无数据</td>
                                                    <td><a href="admin/cost/costAdd" class="btn btn-xs btn-danger del-btn" >添加数据</a></td>
                                                </tr>
                                            {else /}
                                                <tr>
                                                    <td>{$v['project_name']}</td>
                                                    <td>{$v['work_cost']}</td>
                                                    <td>{$v['material_cost']}</td>
                                                    <td>{$v['machine_cost']}</td>
                                                    <td>{$v['safe_cost']}</td>
                                                    <td>{$v['labour_cost']}</td>
                                                    <td>{$v['else_cost']}</td>
                                                    <td>{$v['charges']}</td>
                                                    <td>{$v['expenses_taxation']}</td>
                                                    <td>{$v['derate']}</td>
                                                    <td>{$v['rate_cutting']}</td>
                                                    <td>{$v['total_cost']}</td>
                                                    <td>
                                                        <a href="{:url('admin/cost/costEdit',['id'=>$v['id']])}" class="btn btn-xs btn-primary show-btn">修改</a>
                                                         <button data-id="{$v['id']}" class="btn btn-xs btn-danger del-btn" >删除</button>
                                                    </td>
                                                </tr>
                                                <input type="hidden" id="cost0" value="{$v['project_name']}">
                                                <input type="hidden" id="cost1" value="{$v['work_cost']}">
                                                <input type="hidden" id="cost2" value="{$v['material_cost']}">
                                                <input type="hidden" id="cost3" value="{$v['machine_cost']}">
                                                <input type="hidden" id="cost4" value="{$v['safe_cost']}">
                                                <input type="hidden" id="cost5" value="{$v['labour_cost']}">
                                                <input type="hidden" id="cost6" value="{$v['else_cost']}">
                                                <input type="hidden" id="cost7" value="{$v['charges']}">
                                                <input type="hidden" id="cost8" value="{$v['expenses_taxation']}">
                                            {/if}
                                        {/volist}
                                        </tbody>
                                    </table>
                                    <div>
                                        <div id="main2" style="width: 800px;height:600px;">
                                        </div>
                                    </div>
                                     </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="myjs"}
{js href="/static/admin/assets/js/toastr.min.js"}

{js href="/static/index/js/echarts.min.js"}
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        var plan0 = document.getElementById('plan0').value;
        var plan1 = document.getElementById('plan1').value;
        var plan2 = document.getElementById('plan2').value;
        var plan3 = document.getElementById('plan3').value;
        var plan4 = document.getElementById('plan4').value;
        var plan5 = document.getElementById('plan5').value;
        var plan6 = document.getElementById('plan6').value;
        var plan7 = document.getElementById('plan7').value;
        var plan8 = document.getElementById('plan8').value;

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: plan0 + '计划成本'
            },
            tooltip: {},
            legend: {
                data:['计划成本值(元)']
            },
            xAxis: {
                data: ['办公','材料','机械','安全','劳务','其它','规费','税金']
            },
            yAxis: {},
            series: [{
                name: '计划成本值(元)',
                type: 'bar',
                data: [plan1,plan2,plan3,plan4,plan5,plan6,plan7,plan8]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));
        var cost0 = document.getElementById('cost0').value;
        var cost1 = document.getElementById('cost1').value;
        var cost2 = document.getElementById('cost2').value;
        var cost3 = document.getElementById('cost3').value;
        var cost4 = document.getElementById('cost4').value;
        var cost5 = document.getElementById('cost5').value;
        var cost6 = document.getElementById('cost6').value;
        var cost7 = document.getElementById('cost7').value;
        var cost8 = document.getElementById('cost8').value;

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: plan0 + '实际成本'
            },
            tooltip: {},
            legend: {
                data:['实际成本值(元)']
            },
            xAxis: {
                data: ['办公','材料','机械','安全','劳务','其它','规费','税金']
            },
            yAxis: {},
            series: [{
                name: '实际成本值(元)',
                type: 'bar',
                data: [cost1,cost2,cost3,cost4,cost5,cost6,cost7,cost8]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

<script>
    $(function(){
        $('.delPlan-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            console.log('我要删除: ' + ac_id + '的项目');
            if (confirm('你确定要 [ 删 除 ] 吗?')) {
                var obj = $(this).parents('tr');
                // console.log(obj);
                delPlanAjax(ac_id, obj);
            }
        });
        $('.del-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            console.log('我要删除: ' + ac_id + '的项目');
            if (confirm('你确定要 [ 删 除 ] 吗?')) {
                var obj = $(this).parents('tr');
                // console.log(obj);
                delAjax(ac_id, obj);
            }
        });
    });

    // 执行ajax删除
    function delPlanAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/admin/Cost/deletePlan/id/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    toastr.success(data.info);
                    obj.remove();
                } else {
                    toastr.error(data.info, 'FBI WARNING:');
                }
            },
            error: function () {
                alert('AJAX执行失败');
            }
        });
    }

    // 执行ajax删除
    function delAjax(id, obj) {
        $.ajax({
            type: 'delete',
            url: '/cost/' + id,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    toastr.success(data.info);
                    obj.remove();
                } else {
                    toastr.error(data.info, 'FBI WARNING:');
                }
            },
            error: function () {
                alert('AJAX执行失败');
            }
        });
    }
</script>

{/block}